<template>
  <div class="homepage">
    <div class="box">
      <div class="left">
        <h3>数据统计</h3>
        <div class="two">
          <div class="secode">
            <ul>
              <li>
                房间总数：<span class="west">{{ conunt }}</span>
              </li>
              <li>
                居民总数：<span class="west">{{ userinfo }}</span>
              </li>
              <li>
                商店总数：<span class="west">{{ storest }}</span>
              </li>
            </ul>
          </div>
          <div class="three">
            <ul>
              <li>
                保修总数：<span class="west">{{ repairst }}</span
                >处
              </li>
              <li>
                投诉总数：<span class="west">{{ questionstone }}</span
                >次
              </li>
            </ul>
          </div>
        </div>
      </div>
      <div class="right">
        <h3>今日数据变动</h3>
        <div class="two">
          <div class="secode">
            <ul>
              <li class="li">新增维修：<span class="west">0</span>处</li>
              <li class="li">
                未处理保修：<span class="west">{{ repairstatest }}</span
                >处
              </li>
              <li class="li">新增投诉：<span class="west">0</span>处</li>
              <li class="li">
                未处理投诉：<span class="west">{{ repairst }}</span
                >次
              </li>
            </ul>
          </div>
        </div>
      </div>
    </div>
    <div class="quest">
      <h2>未维修处理</h2>
      <p>
        1、<span class="yes">{{ repai[0].address }}：</span>
        {{ repai[0].content }}
      </p>
      <p>
        2、<span class="yes">{{ repai[0].address }}：</span>
        {{ repai[0].content }}
      </p>
      <p>
        3、<span class="yes">{{ repai[0].address }}：</span>
        {{ repai[0].content }}
      </p>
      <p>
        4、<span class="yes">{{ repai[0].address }}：</span>
        {{ repai[0].content }}
      </p>
      <p>
        5、<span class="yes">{{ repai[0].address }}：</span>
        {{ repai[0].content }}
      </p>
    </div>
    <div class="rest">
      <h2>待投诉处理</h2>
      <p v-for="(item, index) in questionsly" :key="index">
        {{ index + 1 }},<span class="yes"
          >{{ questionsly[index].address }}：</span
        >{{ questionsly[index].content }}
      </p>
    </div>
    <Fee />
  </div>
</template>

<script>
import Fee from "@/components/Fee";
import http from "../api/goods";
export default {
  components: {
    Fee,
  },
  data() {
    return {
      list: [],
      conunt: '',
      userinfo: '',
      storest: '',
      repairst: '',
      questionstone: '',
      repairstatest: '',
      questionstatee: '',
      repairsqe: '',
      repai: [],
      questionsly: [],
    };
  },
  created() {},
  mounted () {
    this.onlkis();
    this.onUserinfo();
    this.stores();
    this.repairs();
    this.questions();
    this.repairstates();
    this.questionstateq();
  },
  methods: {
    async onlkis() {
      const {data} = await http.houses();
      console.log(data);
      this.conunt = data.counts;
    },
    async onUserinfo() {
      const { data } = await http.userinfo();
      this.userinfo = data.counts;
    },
    async stores() {
      const { data } = await http.stores();
      console.log(data);
      this.storest = data.counts;
    },
    async repairs() {
      const { data } = await http.repairs();
      console.log(data);
      this.repai = data.list;
      this.repairst = data.counts;
    },
    async questions() {
      const { data } = await http.questions();
      console.log(data);
      this.questionsly = data.list;
      this.list = data.list;
      this.questionstone = data.counts;
    },
    async repairstates() {
      const { data } = await http.repairstate();
      console.log(data);
      this.repairstatest = data.counts;
    },
    async questionstateq() {
      const { data } = await http.questionstate();
      console.log(data);
      this.questionstatee = data.counts;
    },
  },
};
</script>

<style>
body {
  background: #f4f4f4;
}
.left {
  width: 72%;
  height: 88px;
  padding: 25px;
  border: 1px solid #cccc;
  background: #ffff;
}
.right {
  width: 72%;
    height: 88px;
  padding: 25px;
  border: 1px solid #cccc;
  background: #ffff;
  margin-top: 30px;
}
h3 {
  font-size: 18px;
}
.two {
  width: 855px;
  height: 55px;
  border: 1px solid #cccc;
  margin: 20px auto 0;
  display: flex;
  justify-content: space-around;
}
.secode ul li {
  list-style: none;
  float: left;
  line-height: 50px;
}
.three ul li {
  list-style: none;
  float: right;
  line-height: 50px;
}
.three ul {
  display: flex;
}
.quest {
  width: 400px;
  height: 300px;
  border: 1px solid #cccccc;
  float: right;
  margin-top: -310px;
  background: #ffff;
}
h2 {
  margin-left: 25px;
  margin-top: 30px;
  font-size: 20px;
}
p {
  margin-left: 25px;
  margin: 15px 40px;
}
.rest {
  width: 400px;
  height: 550px;
  border: 1px solid #cccccc;
  float: right;
  background: #ffff;
}
h2 {
  margin-left: 25px;
  margin-top: 30px;
  font-size: 20px;
}
p {
  margin-left: 15px;
  margin: 15px 50px;
}
.west {
  color: red;
  font-size: 25px;
}
.yes {
  color: #409eff;
}
.li {
  margin-left: 50px;
}
</style>